<template>
  <div class="chat-container">
    <div class="sidebar">
      <div class="sidebar-header">
        <button class="new-chat-btn" @click="startNewChat">
          <span>+</span> 新对话
        </button>
      </div>
      <div class="chat-list">
        <div
            v-for="(chat, index) in chats"
            :key="index"
            class="chat-item"
            :class="{ active: currentChatIndex === index }"
            @click="switchChat(index)"
        >
          <div class="chat-item-content">
            <span class="chat-title">{{ chat.title || '新对话' }}</span>
            <span class="chat-preview">{{ getPreview(chat.messages) }}</span>
          </div>
          <button class="delete-chat" @click.stop="deleteChat(index)">
            <svg viewBox="0 0 24 24" width="16" height="16">
              <path fill="currentColor" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <div class="main-content">
      <div class="chat-area" ref="chatArea">
        <div
            v-for="(message, index) in currentChat.messages"
            :key="index"
            class="message"
            :class="message.role"
        >
          <div class="avatar">
            <img
                v-if="message.role === 'user'"
                src="https://avatars.githubusercontent.com/u/1?s=40&v=4"
                alt="User"
            >
            <div v-else class="bot-avatar">
              <svg viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M12,2A2,2 0 0,0 10,4A2,2 0 0,0 12,6A2,2 0 0,0 14,4A2,2 0 0,0 12,2M10.5,7H9V17H10.5V15.5H12V17H13.5V7H12V13H10.5V7M15.5,7A2,2 0 0,0 13.5,9V15A2,2 0 0,0 15.5,17H17.5A2,2 0 0,0 19.5,15V9A2,2 0 0,0 17.5,7H15.5M15.5,9H17.5V15H15.5V9Z" />
              </svg>
            </div>
          </div>
          <div class="message-content">
            <div class="message-text" v-html="formatMessage(message.content)"></div>
          </div>
        </div>
      </div>

      <div class="input-area">
        <div class="input-container">
          <textarea
              v-model="userInput"
              placeholder="输入消息..."
              @keydown.enter.exact.prevent="sendMessage"
              rows="1"
              ref="textarea"
              @input="adjustTextareaHeight"
          ></textarea>
          <button class="send-btn" @click="sendMessage">
            <svg viewBox="0 0 24 24" width="20" height="20">
              <path fill="currentColor" d="M2,21L23,12L2,3V10L17,12L2,14V21Z" />
            </svg>
          </button>
        </div>
        <div class="disclaimer">
          DeepSeek Chat 可能会产生不准确的信息，请勿完全依赖。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ChatWindow4.vue",
  data() {
    return {
      chats: [
        {
          title: '欢迎对话',
          messages: [
            {
              role: 'assistant',
              content: '你好！我是DeepSeek Chat，有什么可以帮你的吗？'
            }
          ]
        }
      ],
      currentChatIndex: 0,
      userInput: ''
    }
  },
  computed: {
    currentChat() {
      return this.chats[this.currentChatIndex] || { messages: [] }
    }
  },
  methods: {
    startNewChat() {
      this.chats.unshift({
        title: '',
        messages: []
      })
      this.currentChatIndex = 0
      this.$nextTick(() => {
        this.$refs.textarea.focus()
      })
    },
    switchChat(index) {
      this.currentChatIndex = index
    },
    deleteChat(index) {
      this.chats.splice(index, 1)
      if (this.currentChatIndex >= index && this.currentChatIndex > 0) {
        this.currentChatIndex--
      }
      if (this.chats.length === 0) {
        this.startNewChat()
      }
    },
    sendMessage() {
      if (!this.userInput.trim()) return

      const userMessage = {
        role: 'user',
        content: this.userInput
      }

      this.currentChat.messages.push(userMessage)

      // 如果是第一条消息，设置为对话标题
      if (this.currentChat.messages.length === 1) {
        this.currentChat.title = this.userInput.slice(0, 30)
      }

      this.userInput = ''
      this.adjustTextareaHeight()

      this.$nextTick(() => {
        this.scrollToBottom()

        // 模拟AI回复
        setTimeout(() => {
          const responses = [
            "我理解你的问题，让我思考一下...",
            "这是一个很好的问题！根据我的知识...",
            "感谢你的提问。关于这个问题...",
            "我正在处理你的请求，请稍等...",
            "根据我的分析，可能有以下几种情况..."
          ]
          const aiMessage = {
            role: 'assistant',
            content: responses[Math.floor(Math.random() * responses.length)]
          }
          this.currentChat.messages.push(aiMessage)
          this.scrollToBottom()
        }, 1000)
      })
    },
    getPreview(messages) {
      if (!messages || messages.length === 0) return '暂无消息'
      const lastMessage = messages[messages.length - 1]
      return lastMessage.content.slice(0, 30) + (lastMessage.content.length > 30 ? '...' : '')
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const chatArea = this.$refs.chatArea
        chatArea.scrollTop = chatArea.scrollHeight
      })
    },
    adjustTextareaHeight() {
      const textarea = this.$refs.textarea
      textarea.style.height = 'auto'
      textarea.style.height = `${Math.min(textarea.scrollHeight, 150)}px`
    },
    formatMessage(text) {
      // 简单的格式化，可以将换行符转换为<br>
      return text.replace(/\n/g, '<br>')
    }
  },
  mounted() {
    this.adjustTextareaHeight()
  }
}
</script>

<style scoped>
.chat-container {
  display: flex;
  height: 100vh;
  background-color: #f7f7f8;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sidebar {
  width: 260px;
  background-color: #ffffff;
  border-right: 1px solid #e5e5e6;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sidebar-header {
  padding: 12px;
  border-bottom: 1px solid #e5e5e6;
}

.new-chat-btn {
  width: 100%;
  padding: 10px 12px;
  background-color: #f0f0f0;
  border: 1px solid #d9d9e3;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: background-color 0.2s;
}

.new-chat-btn:hover {
  background-color: #e5e5e5;
}

.new-chat-btn span {
  font-size: 18px;
  margin-right: 6px;
}

.chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.chat-item {
  padding: 10px 12px;
  margin: 0 8px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.2s;
}

.chat-item:hover {
  background-color: #f5f5f5;
}

.chat-item.active {
  background-color: #ebebeb;
}

.chat-item-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-title {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.chat-preview {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.delete-chat {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.chat-item:hover .delete-chat {
  opacity: 1;
}

.delete-chat:hover {
  color: #ff4d4f;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background-color: #f7f7f8;
}

.message {
  display: flex;
  margin-bottom: 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.message.user {
  flex-direction: row-reverse;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 12px;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bot-avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #10a37f;
  color: white;
}

.message-content {
  flex: 1;
}

.message-text {
  padding: 12px 16px;
  border-radius: 8px;
  line-height: 1.5;
  font-size: 15px;
}

.user .message-text {
  background-color: #10a37f;
  color: white;
  border-top-right-radius: 0;
}

.assistant .message-text {
  background-color: #ffffff;
  color: #333;
  border-top-left-radius: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.input-area {
  padding: 12px;
  background-color: #ffffff;
  border-top: 1px solid #e5e5e6;
}

.input-container {
  display: flex;
  align-items: flex-end;
  background-color: #f7f7f8;
  border-radius: 8px;
  padding: 8px 12px;
  border: 1px solid #d9d9e3;
}

textarea {
  flex: 1;
  border: none;
  background: transparent;
  resize: none;
  outline: none;
  font-size: 15px;
  line-height: 1.5;
  max-height: 150px;
  padding: 4px 0;
  font-family: inherit;
}

.send-btn {
  background: none;
  border: none;
  color: #10a37f;
  cursor: pointer;
  padding: 4px 0 4px 12px;
}

.send-btn:hover {
  color: #0d8a6d;
}

.disclaimer {
  font-size: 12px;
  color: #999;
  text-align: center;
  margin-top: 8px;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>